<div class="row">
    <div class="col">
        <div class="card">
            <h4 class="card-title px-3 pt-3">用戶列表</h4>
            <h6 class="card-subtitle px-3">所有用戶信息</h6>
            <div class="card-body">
                <a class="btn btn-info" data-toggle="modal"
                   data-target="#myModal" href="#">添加用户</a>
                <div id="user-list">
                    <table class="table basic-elaboration-tablet-search table-hover table-striped color-table info-table">
                        <thead>
                        <tr>
                            <th>用户编号</th>
                            <th>邮箱地址</th>
                            <th>登录密码</th>
                            <th>用户昵称</th>
                            <th>积分</th>
                            <th>邮箱状态</th>
                            <th>账户状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in users">
                            <td>{{item.id}}</td>
                            <td>{{item.email}}</td>
                            <td>{{item.pwd}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.score}}</td>
                            <td>{{item.email_status}}</td>
                            <td>{{item.status}}</td>
                            <td>
                                <a class="btn btn-success" href="#">查看</a>
                                <a class="btn btn-primary" href="#">编辑</a>
                                <a class="btn btn-danger" href="#">删除</a>
                            </td>

                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>
<!--添加用户-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="card">
                <div class="card-title px-3 pt-3">新增用户</div>
                <div class="card-subtitle px-3">添加用户</div>
                <div class="card-body">
                    <form class="form-material" action="http://localhost:8080/upload" method="post"
                          enctype="multipart/form-data">
                        <div class="form-group">
                            <label>邮箱地址：</label>
                            <input type="email" name="email" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>用户密码：</label>
                            <input type="password" name="pwd" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>用户昵称：</label>
                            <input type="text" name="name" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>头像地址：</label>
                            <div class="col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <input type="file" id="input-file-max-fs" name="photo" class="dropify"
                                               data-max-file-size="2M"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>积分：</label>
                            <input type="number" name="score" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>邮箱状态：</label>
                            <input type="text" name="email_status" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>账户状态：</label>
                            <input type="text" name="status" class="form-control">
                        </div>
                        <div>
                            <button class="btn btn-primary"><i class="fa fa-save"></i> 保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $.getJSON("http://localhost:8080/user", function (dto) {
            new Vue({
                el: "#user-list",
                data: {
                    users: dto.data
                }
            })
        });
    });
    $(function () {
        // 为所有 type="file" 的 input，设置预览
        $(":file").change(function () {
            var targetName = $(this).data("img");

            //使用这个方法来临时创建一个文件的链接，参数是一个file或者blob
            var path = URL.createObjectURL(this.files[0]);

            //将链接赋值给上面的图片src路径
            $(targetName).prop("src", path)
        });

        $("form").submit(function () {
            var data = new FormData(this);  // 传递的数据

            $.ajax({
                url: "http://localhost:8080/user",
                data: data,
                type: "POST",
                processData: false,
                contentType: false,
                success: function (dto) {
                    //如果成功
                    if (dto.code == 1000) {
                        swal({
                            title: "添加成功",
                            type: "success",
                            confirmButtonText: "确定"
                        })
                    } else {
                        swal({
                            title: "添加失败",
                            text: dto.msg,
                            type: "error",
                            confirmButtonText: "确定"
                        })
                    }
                }
            });

            return false;
        });
    });

    $(document).ready(function () {
        // Basic
        $('.dropify').dropify();

        // Translated
        $('.dropify-fr').dropify({
            messages: {
                default: 'Glissez-déposez un fichier ici ou cliquez',
                replace: 'Glissez-déposez un fichier ou cliquez pour remplacer',
                remove: 'Supprimer',
                error: 'Désolé, le fichier trop volumineux'
            }
        });

        // Used events
        var drEvent = $('#input-file-events').dropify();

        drEvent.on('dropify.beforeClear', function (event, element) {
            return confirm("你真的想删除吗 \"" + element.file.name + "\" ?");
        });

        drEvent.on('dropify.afterClear', function (event, element) {
            alert('File deleted');
        });

        drEvent.on('dropify.errors', function (event, element) {
            console.log('有错误');
        });

        var drDestroy = $('#input-file-to-destroy').dropify();
        drDestroy = drDestroy.data('dropify')
        $('#toggleDropify').on('click', function (e) {
            e.preventDefault();
            if (drDestroy.isDropified()) {
                drDestroy.destroy();
            } else {
                drDestroy.init();
            }
        })
    });
</script>